<script setup lang="ts">

import TopView from "@/components/search/TopView.vue";
import {articleDetail, danthumpsup, SetPoints} from "@/api/home";
import {useRoute} from "vue-router";
import {ref} from "vue";
import {showToast} from "vant";
const route =useRoute()
const showShare = ref(false);
const options = [
    [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
    ],
    [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' },
    ],
];


const articlObj =ref(Object)
const videoObkj =ref()
const isLike = ref()
const articleId = ref()
// console.log(route.query.jsArticle)
getart()
function getart() {
    articleDetail(route.query.jsArticle<string>).then(res=>{
        console.log(res)
        articlObj.value = res.data
        videoObkj.value =  'http://192.168.5.120:8199' + res.data.videoList
        isLike.value = res.data.isLike
        articleId.value = res.data.articleId
        console.log(isLike)
        // console.log(articlObj)
    })
}

const isLiked=ref()
isLiked.value =true
function thumbsUp() {
    // console.log(obj.value.isLike)
    // console.log(obj.value)
    // danthumpsup(route.query.jsArticle<string>).then(res=> {
    //     console.log(res)
    // })

    SetPoints(  articleId.value  ).then(res=>{
        console.log(res)
        if ( isLike.value==0) {
            showToast('点赞成功，这个点赞已经获取积分')
            getart()
        } else {
            showToast('取消点赞成功')
            console.log(isLike.value)
            getart()
            // isLike.value--
            console.log(isLike.value)

        }

    })
}
function forward() {
    // console.log(forward)
}
</script>

<template>
  <div>
      <top-view>详情</top-view>
      <div class="Box">
          <div class="middleBox">
              <div class="title">
                  {{articlObj.title}}
              </div>
              <div class="contentBox">
                  <div class="smallTitle">
                     {{articlObj.intro}}
                  </div>
                  <div class="content">
                      <div class="imgBox">
                          <video :src="videoObkj" controls width="100%" height="100%"></video>
                      </div>
                  </div>
              </div>
              <div class="footerBox">
<!--                  <div class="thumbsUp" @click.stop="thumbsUp">-->
<!--                      <van-icon name="thumb-circle-o" />-->
<!--                      {{obj.likesNumber}}-->
<!--                  </div>-->
<!--                  <div class="forward" @click.stop="forward">-->
<!--                      <van-icon name="share-o" />-->
<!--                      转发-->
<!--                  </div>-->
                  <div class="thumbsUp" @click.stop="thumbsUp" >
                      <div v-if="!isLike">
                          <img src="./images/赞gray.png" alt="">
                      </div>
                      <div v-else>
                          <img src="./images/赞red.png" alt="">
                      </div>
                      <!--                                    <van-icon name="thumb-circle-o" />-->
                      {{articlObj.likesNumber}}
                  </div>

                  <div class="forward" @click.stop="forward">
                      <div>
                          <van-cell title="转发" @click="showShare = true" />
                          <van-share-sheet
                              v-model:show="showShare"
                              title="立即分享给好友"
                              :options="options" z-index =2000
                          />
                      </div>

                  </div>




              </div>
          </div>
      </div>
  </div>
</template>

<style scoped>
.imgBox {
    width: 60%;
    height: 150px;
    video {
        width: 100%;
        height: 100%;
    }
}
.Box {
    background-color: #fff;
    min-height: 591px;
    .middleBox {
        padding: 20px;
        .title {
            font-size: 26px;
            padding-bottom: 10px;
            border-bottom: 1px solid #E8E8E8;
        }
        .contentBox {
            padding:  20px  0;
            border-bottom: 1px solid black;
            .smallTitle {
                font-size: 14px;
                color: #999999;
                margin-bottom: 5px;
            }
        }
        .footerBox {
            display: flex;
            text-align: center;
            font-size: 12px;
            color: #999999;
            .thumbsUp {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 50%;
                margin: 10px 0 0;
                border-right: 1px solid #E6E6E6;
            }
            .forward {
                width: 50%;
                margin: 10px 0 0 ;
            }

        }
    }
}
</style>